<template>
  <div class="panel-container">
    <div class="panel-content content-2">
      <div class="panel-title">{{ title }}</div>
      <el-table stripe :data="dataList" size="mini" :header-cell-style="{ background: '#F5F5F5', color: '#000000' }" ref="table1" style="width: 100%">
        <af-table-column align="center" header-align="center" show-overflow-tooltip prop="cate_name" label="分类"> </af-table-column>
        <af-table-column align="center" header-align="center" show-overflow-tooltip prop="key_words" label="关键词"> </af-table-column>
        <af-table-column align="center" header-align="center" show-overflow-tooltip prop="proc_city" label="地区"> </af-table-column>
        <af-table-column align="center" header-align="center" show-overflow-tooltip prop="dux_count" label="独享信息数" width="200"> </af-table-column>
        <af-table-column align="center" header-align="center" show-overflow-tooltip prop="vip_count" label="付费会员数量" width="200"> </af-table-column>
      </el-table>
      <div class="text-1">
        <span class="label"> 人数去重合计 </span>
        <span class="num"> {{ total }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { apiDuxUser } from '@/api/dataStatistics'

export default {
  name: 'Panel2',
  props: {
    title: String,
    time: Object,
  },
  data() {
    return {
      dataList: [],
      total: 0,
    }
  },
  watch: {
    time: function () {
      this.getData()
    },
  },
  activated() {
    this.$refs.table1.doLayout()
  },
  mounted() {},
  destroyed() {},
  methods: {
    getData() {
      apiDuxUser(this.time).then((res) => {
        const { info, vip_total_num } = res
        this.dataList = info
        this.total = vip_total_num
      })
    },
  },
}
</script>

<style scoped lang="scss">
.text-1 {
  margin-top: 20px;
  text-align: right;
  .label {
    display: inline-block;
    width: 200px;
    text-align: center;
  }
  .num {
    display: inline-block;
    width: 200px;
    text-align: center;
  }
}
</style>
